<template>
	<view>

<view class="main">
	<div v-if="flag">
	    <i class="fa fa-home" aria-hidden="true"></i>
	    login1
	    <span>houdunren.com</span>
	</div>
	<div >
	    <i class="fa fa-user" aria-hidden="true"></i>
	    register
	    <span>houdunren.com</span>
	</div>
</view>
	<nav>
	    <a href="javascript:;" @click="change(1)">登录</a>
	    <a href="javascript:;" @click="change(2)">注册</a>
	</nav>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag:true
				
			}
		},
		methods: {
			change(t) {
		  if(t===1){
			  this.flag=true;
		  }
		  else{
			  setTimeout( ( this.flag=false),2000)
			 
		  }
			}
		}
	}
	
</script>

<style>
  * {
		        padding: 0;
		        margin: 0;
		        box-sizing: border-box;
		    }
		
		    main {
		        position: absolute;
		        width: 100vw;
		        height: 100vh;
		        transition: 2s;
		        transform-style: preserve-3d;
		    }
		
		    main .login {
		        transform: perspective(900px) rotateY(0deg);
		    }
		
		    main .register {
		        transform: perspective(900px) rotateY(180deg);
		    }
		
		    div {
		        position: absolute;
		        width: 100%;
		        height: 100%;
		        font-size: 5em;
		        display: flex;
		        flex-direction: column;
		        justify-content: center;
		        align-items: center;
		        backface-visibility: hidden;
		        transition: 2s;
		        text-transform: uppercase;
		        color: white;
		    }
		
		    div span {
		        text-transform: lowercase;
		        letter-spacing: .2em;
		        font-size: .2em;
		        color: #2c3e50;
		    }
		
		    div:nth-child(1) {
		        background: #2ecc71;
		        transform: rotateY(0deg);
				transition:all 2s;
		}
		    div:nth-child(2) {
		        background: #e74c3c;
		        transform: rotateY(180deg);
				transition:all 4s;
		    }
		
		    nav {
		        position: absolute;
		        width: 100%;
		        height: 100%;
		        z-index: 99;
		        text-align: center;
		        display: flex;
		        align-items: flex-end;
		        justify-content: center;
		        padding-bottom: 30px;
		    }
		
		    nav a {
		        padding: 10px;
		        text-decoration: none;
		        font-size: 1em;
		        background: #000;
		        color: white;
		        margin-right: 10px;
		        cursor: pointer;
		        left: 0;
		        top: 0;
		    }
</style>
